{% extends 'base.html' %}

{% block title %}{{ location.name }}{% endblock %}

{% block content %}
    <div id="breadcrumbs">
        <img src="/site_media/detail/prevarrow_hover.gif" /> <a href="javascript:history.go(-1);">Back to Interactive Map</a>
    </div>
    <div id="sitename" style="font-size: 1.6em; font-weight: bold; padding: 8px 0 12px;">
        {{ location.name }}
    </div>
    <table style="width: 100%;">
        <tr>
            <td style="vertical-align: top;">
                <h1>Mine details</h1>
                <div class="section" style="font-size: .9em;">
                    <table>
                        <tr>
                            <th>Commodity</th>
                            <td>{{ location.commodity }}</td>
                        </tr>
                        <tr>
                            <th>Company</th>
                            <td>{{ location.company }}</td>
                        </tr>
                        <tr>
                            <th>Location</th>
                            <td>Not Implemented</td>
                        </tr>
                        <tr>
                            <th>Phone</th>
                            <td>Not Implemented</td>
                        </tr>
                        <tr>
                            <th>Description</th>
                            <td>{{ location.description }}</td>
                        </tr>
                    </table>
                </div>
            </td>
            <td style="vertical-align: top;">
                <img src="http://maps.google.com/staticmap?center={{ location.coordinates.y }},{{ location.coordinates.x }}&zoom=13&size=230x230&maptype=roadmap&markers={{ location.coordinates.y }},{{ location.coordinates.x }},red&key={{ maps_api_key }}" />
            </td>
        </tr>
    </table>
    
    <h1>Photos</h1>
    <div class="section" style="font-size: .9em;">
        <div id="photos" class="photos" style="padding-top: 5px;">
            <img src="{{ MEDIA_URL }}images/loading.gif" />
        </div>
        <div>
            <p>
            Do you have some interesting photos of this location?  Share them with the community:
            </p>
            <form method="post" enctype="multipart/form-data" target="transport-frame" action="/location/upload_photo/">
                <input type="hidden" name="location_id" value="{{ location.id }}" />
                <table>
                    <tbody><tr><th><label for="id_file">File:</label></th><td><input type="file" id="id_file" name="file"/></td></tr>
            <tr><th><label for="id_caption">Caption:</label></th><td><input type="text" maxlength="400" name="caption" id="id_caption"/></td></tr>
                    <tr>
                        <td colspan="2">
                            <input type="submit"/>
                        </td>
                    </tr>
                </tbody></table>
            </form>
        <!-- http://farm{farm-id}.static.flickr.com/{server-id}/{id}_{secret}.jpg -->
        </div>
    </div>

    <h1>Discussion</h1>
    <div class="section" style="font-size: .9em;">
    Not Implemented
    <!--
        <div id="comments">
            <div class="comments-header">
                <div class="comments-label">
                    Comments (2)
                </div>
                <div class="comments-add-link">
                    <a href="javascript:showNewComment();">Post a Comment</a>
                </div>
            </div>
            <div class="comment-new">
                <form target="sidebar-worker" method="post" action="/map/sidebar/location/discussion/new/8975/">
                    <textarea rows="5" cols="20" name="comment"></textarea>
                    <input type="submit"/>
                </form>
            </div>
            <div class="comment">
                <div class="comment-header">
                    <a href="/profile/users/ryates100" class="comment-user">ryates100</a>
                     (June 19, 2008) 
                </div>
                <div class="comment-body">
                    I haven't gotten out to check on this yet, but I will soon.
                </div>
            </div>
        
            <div class="comment">
                <div class="comment-header">
                    <a href="/profile/users/ryates100" class="comment-user">ryates100</a>
                     (June 15, 2008) 
                </div>
                <div class="comment-body">
                    This is close to my house so I'll keep an eye on it. 
                </div>
            </div>-->
        </div>
    </div>
   	<iframe src="/resources/blank.html" id="transport-frame" name="transport-frame" style="width: 0px; height: 0px; border: none; display: none;"></iframe>
    <script type="text/javascript">
        function load_photos(updated) {
            if (updated) {
                alert('Thanks for sharing your photo. There will be a short delay until it is available for viewing on the site.');
            }
            $("#photos").load("/location/photos/{{ location.id }}/");
        }
        load_photos(false);
    </script>


{% endblock %}